<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter {
            width: 520px;
            height: 280px;
            overflow: hidden;
        }

        .inner {
            width: 2600px;
            height: 280px;
            position: relative;
        }
        .inner::after {
            content: '';
            display: block;
            clear: both;
        }
        .img-1 {
            display: block;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 总共需要两个容器，
        inner容器中有5张图，宽度5张图，移动时是由inner带动5张图一起移动，这些图片横向排列在inner中
        outter容器在inner的外面，宽度是一张图的宽度，多出的图不可见
     -->
    <div class="outter">
        <div class="inner">
            <img class="img-1" src="./image/0.jpg" alt="">
            <img class="img-1" src="./image/1.jpg" alt="">
            <img class="img-1" src="./image/2.jpg" alt="">
            <img class="img-1" src="./image/3.jpg" alt="">
            <img class="img-1" src="./image/4.jpg" alt="">
        </div>
    </div>

    <script>
        var inner = document.querySelector('.inner');
        var leftDe = 0;
        var imgNum = 5;
        var moveNum = 0
        var distance = 520; // 每次移动的距离，也是图片的宽度
        setInterval(function() {
            inner.style.left = '-520px';
            console.log('left:', inner.style.left);
            if(moveNum < (imgNum-1)) {
                // 添加判断，根据次数判断  移动的次数是图片的数量-1  到了最后一张图 再移动就是第一张图
                // 动画的执行时间  执行间隔就是setInterval的第二个参数
                // 动画的执行时间 500毫秒内完成图片的移动
                var timer = setInterval(function() {
                    // console.log('left:', inner.style.left);
                    if(inner.style.left) {
                        leftDe -= 520;
                        inner.style.left = leftDe+'px';
                    }else {

                    }
                }, 10)
                moveNum ++ // 移动的次数
                clearInterval(timer)
            }else {
                inner.style.left = '0px'
                moveNum = 0
                leftDe = 0
            }
            // console.log(moveNum);
        }, 2000);
    </script>
</body>

</html>